<template>
<!-- 一键报警 -->
    <div class="one-click-alarm-list">
        <el-row type="flex" justify="space-between">
            <el-form class="serach-form" ref="searchForm" :model="searchForm" :inline="true" @submit.native.prevent>
                <el-form-item >
                    <el-date-picker
                        v-model="searchForm.time"
                        type="daterange"
                        align="right"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd"
                        :picker-options="utils.intTimePickerOptions()"
                        @change="search">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                <el-button class="form-search-btn" type="primary" @click="search">查询</el-button>
                </el-form-item>
            </el-form>
        </el-row>
        <div>
            <el-table
                v-loading="loading"
                ref="OneClickAlarmTableList"
                :data="tableData"
                style="width: 100%">
                <el-table-column label="序号" type="index" width="50"></el-table-column>
                <el-table-column label="上报人" prop="applyAccountName" width="200"></el-table-column>
                <el-table-column label="报警描述" prop="alarmDesc"></el-table-column>
                <el-table-column label="语音" prop="hiddenDangerVoice" width="200">
                    <template slot-scope="scope">
                        <div v-if="scope.row.hiddenDangerVoice != ''" style="display:flex;align-items:center;">
                            <p :class="'weixinAudio_'+scope.row.id" @click="playAudio(scope.row.id, scope.row.hiddenDangerVoice)">
                                <audio :src="scope.row.hiddenDangerVoice" id="media" width="1" height="1" preload></audio>
                                <span id="audio_area" class="db audio_area">
                                    <div class="audio_wrp db">
                                        <span class="audio_play_area">
                                            <i class="icon_audio_default"></i>
                                            <i class="icon_audio_playing"></i>
                                        </span>
                                        <span id="audio_length" class="audio_length tips_global"></span>
                                        <span id="audio_progress" class="progress_bar" style="width: 0%;"></span>
                                    </div>
                                </span>
                            </p>
                            <el-button type="text" @click="handleDownload(scope.row)" style="margin-left:10px;">下载</el-button>
                        </div>
                        <p v-else>暂无录音</p>
                    </template>
                </el-table-column>
                <el-table-column label="上报位置" prop="addrDesc" width="300">
                    <template slot-scope="scope">
                        <el-link type="primary" @click="showPositionDialog(scope.row)">{{ scope.row.addrDesc }}</el-link>
                    </template>
                </el-table-column>
                createTime
                <el-table-column label="上报时间" prop="createTime" width="200"></el-table-column>
                <el-table-column label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button @click="handleDetail(scope.row)" type="text" size="small">详情</el-button>
                    </template>
                </el-table-column>
                <el-table-column type="expand" width='1'>
                    <template slot-scope="scope">
                        <!-- 报警详情 -->
                        <el-form label-width="120px" class="demo-table-expand">
                            <el-form-item label="上报人：">
                                <span>{{ scope.row.applyAccountName }}</span>
                            </el-form-item>
                            <el-form-item label="手机号：">
                                <span>{{ scope.row.telNum }}</span>
                            </el-form-item>
                            <el-form-item label="现场图片：">
                                <div class="live-situation-wrap">
                                    <template v-for="(item, i) in scope.row.picUrls.split(',')">
                                        <!-- 图片 -->
                                        <div v-if="isImg(item)" class="alarm-pic" :key="i">
                                            <img :src="item||defaultImg" width="100" height="100" @click="$imgPreview" :data-imgpreview="item"/>
                                        </div>
                                        <!-- 视频 -->
                                        <div v-if="!isImg(item)" class="alarm-video" :key="i">
                                            <video :src="item" controls="controls" height="200" width="300"></video>
                                        </div>
                                    </template>
                                </div>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                background
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
                :current-page.sync="currentPage"
                :page-sizes="[10, 50, 100]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
        <el-dialog
            :close-on-click-modal="false"
            title="签到定位"
            width="600px"
            top='10vh'
            v-if="positionDialogFalg"
            :visible.sync="positionDialogFalg"
            @close="closePositionDialog"
            v-dialogDrag>
            <p-form :pisionInfo="pisionInfo"></p-form>
        </el-dialog>
    </div>
</template>
<script>
import '@/libs/weixinAudio'
import utils from '@/utils/util'
import { getkeyAlarmList } from '@/api/keyAlarm'
import pForm from '../Common/AlarmPosition'
import { downloadAudio } from '@/utils/downloadUtil'

export default {
    name: 'OneClickAlarmList',
    components: {
        pForm,
    },
    data() {
        return {
            utils: utils,
            loading: true,
            defaultImg: this.GLOBAL.defaultImg,
            searchForm: {
                orgId: this.$store.state.userinfo.isMuilUnitUser === 1 ? (this.$store.state.userinfo.org.id+','+this.$store.state.userinfo.organizationIds) : this.$store.state.userinfo.org.id,
                time: ''
            },
            tableData: [],
            // 分页
            currentPage: 1,
            pageSize: 10,
            total: 0,
            // audio集合
            audioList: {},
            positionDialogFalg: false, // 定位弹框
            pisionInfo:{} // 警情定位信息
        }
    },
    created() {
        this.search()
    },
    methods: {
        handleDownload(item){
            downloadAudio(item.hiddenDangerVoice,item.id)
        },
        // 判断是否为图片
        isImg(url) {
            let imgStr = 'jpg,gif,png,jpeg,BMP,JPG,JPEG,PNG,GIF'
            let arr = url.split('.')
            let endType = arr.length > 0 ? arr[arr.length - 1] : ' '

            if(imgStr.indexOf(endType) > -1) {
                return true
            } else {
                return false
            }
        },
        search() {
            this.getTableData()
        },
        // 获取列表数据
        getTableData(pageIndex, pageSize) {
            let that = this
            that.loading = true
            if (pageIndex) {
                that.currentPage = pageIndex
            }
            if (pageSize) {
                that.pageSize = pageSize
            }
            
            getkeyAlarmList({
                orgId: that.searchForm.orgId,
                startTime: that.searchForm.time && that.searchForm.time.length > 0 ? that.searchForm.time[0] + ' 00:00:00' : '', // 创建时间
                endTime: that.searchForm.time && that.searchForm.time.length > 0 ? that.searchForm.time[1] + ' 23:59:59' : '',
                pageIndex: that.currentPage - 1,
                pageSize: that.pageSize,
                queryType: 1
            }).then(res => {
                if(res.status === 200) {
                    that.tableData = res.data
                    that.total = res.total
                }
                that.loading = false
            })
            
        },
        handleSizeChange(pageSize) {
            this.getTableData(1, pageSize)
        },
        handleCurrentChange(currentPage) {
            this.getTableData(currentPage)
        },
        // 播放录音
        playAudio (id, hiddenDangerVoice){
            let that = this
            // 停止其他的音频播放
            for(let key in that.audioList) {
                if(key != ('weixinAudio_'+id)) {
                    that.audioList[key].weixinAudio0.stop()
                }
            }
            if(!that.audioList['weixinAudio_'+id]) {
                if(hiddenDangerVoice != null && hiddenDangerVoice != '' && hiddenDangerVoice != undefined){
                    that.audioList['weixinAudio_'+id] = $('.weixinAudio_'+id).weixinAudio({
                        autoplay: false,
                        src: hiddenDangerVoice,
                    })
                }else{
                    that.$message({
                        type: 'warning',
                        message: '暂时没有录入语音！'
                    })
                }
            }
        },
        // 打开定位
        showPositionDialog(row){
            this.pisionInfo = row || {}
            this.positionDialogFalg = true
        },
        closePositionDialog(refresh) {
            this.positionDialogFalg = false
        },
        // 详情
        handleDetail(row) {
            let that = this

            this.$refs.OneClickAlarmTableList.toggleRowExpansion(row)
        },
    }
}
</script>
<style lang="scss">
.one-click-alarm-list {
    .live-situation-wrap {
        display: flex;
        .alarm-pic,
        .alarm-video {
            margin-right: 15px;
        }
    }
}
</style>